<script setup lang="ts">
import { ref } from 'vue'
import { SearchIcon } from '@/components/Icons'
defineEmits(['changeActive'])
const searchInputActive = ref(false)
</script>

<template>
  <header class="header">
    <div class="menu-icon" @click="$emit('changeActive')">
      <div class="dash-top"></div>
      <div class="dash-bottom"></div>
      <div class="circle"></div>
    </div>
    <span class="title">Notifications</span>
    <input
      type="text"
      :class="['search-input', { active: searchInputActive }]"
      placeholder="Search..."
    />
    <SearchIcon
      @click="searchInputActive = !searchInputActive"
      class="search-icon"
      :width="25"
      :height="25"
    />
  </header>
</template>

<style lang="scss" scoped>
.header {
  position: relative;
  background-color: #5f98cd;
  padding: 10px;

  .menu-icon {
    /* background-color: rgb(212, 128, 17);s */
    width: 29px;
    height: 15px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    &:hover {
      .dash-top,
      .dash-bottom,
      .circle {
        background-color: #fff;
        transition: background-color 0.3s ease-in-out;
      }
    }
    .dash-top {
      width: 22px;
      height: 3px;
      background-color: #b2daff;
    }
    .dash-bottom {
      margin-top: 10px;
      width: 29px;
      height: 3px;
      background-color: #b2daff;
    }
    .circle {
      position: absolute;
      top: -2px;
      right: -1px;
      width: 7px;
      height: 7px;
      border-radius: 100%;
      background-color: #b2daff;
    }
  }

  .title {
    display: block;
    text-align: center;
    padding: 10px;
    color: #fff;
  }

  .search-input {
    position: absolute;
    top: 50%;
    z-index: 10;
    box-sizing: border-box;
    padding: 0 17px;
    width: 230px;
    height: 34px;
    font-size: 13px;
    border-radius: 17px;
    border: none;
    transform: translate(15px, -50%);
    opacity: 0;
    /* 因为opacity为0仍然会占据位置，所以设置不能点击 */
    pointer-events: none;
    transition: all 0.5s ease-in-out;

    &.active {
      opacity: 1;
      transform: translate(-3px, -50%);
      pointer-events: all;
    }
    &:focus {
      outline: none;
    }
  }
  .search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    fill: #b2daff;
    cursor: pointer;
    transition: fill 0.3 ease-in-out;

    &:hover {
      fill: #fff;
    }
  }
}
</style>
